<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page import="com.yaodian100.core.common.utils.ServerValue"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c-rt:set var="frontContextPath" value='<%=ServerValue.getFrontContextPath()%>'/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" charset="UTF-8" src="/js/jquery.timers-1.2.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.alphanumeric.js"></script>
<link rel="stylesheet" href="/css/mgm_111128.css" type="text/css" />
<Style>
li.w-1of1{overflow:hidden}
</style>
<script language="javascript">
	$().ready(function(){

		$("#mMobile").numeric();
		$("#edialog").dialog({
			autoOpen: false,
			bgiframe: true,
			height: 160,
			width:310,
			modal: true
		});

		$("#mdialog").dialog({
			autoOpen: false,
			bgiframe: true,
			height: 220,
			width:470,
			modal: true
		});

		$("#sdialog").dialog({
			autoOpen: false,
			bgiframe: true,
			height: 150,
			width:325,
			modal: true
		});

		$("#fdialog").dialog({
			autoOpen: false,
			bgiframe: true,
			height: 180,
			width:375,
			modal: true
		});

		$("#crmcheckdialog").dialog({
			autoOpen: false,
			bgiframe: true,
			width: 380,
			height: 'auto',
			modal: true,
			resizable: false 
		});
		

		if("${actionResult}" == "exist"){
			$("#mobileTip").text("该手机已被使用");
			$("#mobileTip").show();
			$("#mdialog").dialog('open');
		}else if("${actionResult}" == "success"){
			$("#sdialog").dialog('open');
		}else if("${actionResult}" == "error"){
			$("#smsg").text('发送简讯失败');
			$("#sdialog").dialog('open');
		}else if("${actionResult}" == "ccode_error"){
			$("#ccodeTip").text('校验码错误');
			$("#ccodeTip").show();
		}

		$("#ccode").focus(function(){
			$(":strong[class*=ipt-w20]").attr('class','ipt-w20 on-f');
		}).blur(function(){
			$(":strong[class*=ipt-w20]").attr('class','ipt-w20');
		});
		
		var left = 30;
		if(parseInt('${member.activateCount}')<parseInt('${limitMobileRegTimes}')){
			if("${actionResult}" == "success" || "${actionResult}" == ""){
				$('body').everyTime('1s',function(){
					if(left==0){
						$('body').stopTime ();
						$('#resend').removeAttr('disabled');
						$('#resend').val('点此重发校验码');
						return;
					}
					$('#resend').val('请于'+left+'秒后点此重发校验码');
					left--;
				});
			}else{
				left=0;
				$('#resend').removeAttr('disabled');
				$('#resend').val('点此重发校验码');
			}
		}else{
			$('#resend').val('点此重发校验码');
		}
				
		$('#resend').click(function(){
			$("#resendForm").submit();
		});

		$("a:[id*=modifyMobile]").click(function(){
			if(parseInt('${member.activateCount}')>=parseInt('${limitMobileRegTimes}')){
				$("#fdialog").dialog('open');
			}else if(left==0){
				$("#mobileTip").hide();
				$("#mMobile").val('');
				$("#mdialog").dialog('open');
			}
		});
		
		
		$("#echange").click(function(){
			$("#edialog").dialog('open');
		});

		$("#ecancle").click(function(){
			$("#edialog").dialog('close');
		});

		$("#ecommit").click(function(){
			$("#toEmailActivateForm").submit();
			return false;
		});

		$("#sclose").click(function(){
			$("#sdialog").dialog('close');
		});

		$("#fclose").click(function(){
			$("#fdialog").dialog('close');
		});

		$("#crmClose").click(function(){
			$("#crmcheckdialog").dialog('close');
		});

		$('#mcommit').click(function(){
			checkMobile(1);
		});

		$("#mMobile").blur(function(){
			checkMobile(0);
		});
		

		$("#goactivate").click(function(){
			$("#ccodeTip").hide();
			if($("#ccode").val().length==0){
				$("#ccodeTip").text('请输入校验码');
				$("#ccodeTip").show();
				return;
			}
			$.post("${frontContextPath}/jsonCheckActivateMobileCode.do",{memberId:'${member.memberId}',ccode:$("#ccode").val()},
					function callback(result){
						if(result!=''){
							$("#ccodeTip").text('校验码错误');
							$("#ccodeTip").show();
						}else{
							$("#toMobileActivateForm").submit();
							return false;
						}
					},
					"json");
		});

		$("#goCrmCheck").click(function(){
			$.post("${frontContextPath}/jsonCrmCheckMobile.do",{mobile:'${mobile}',memberId:'${member.memberId}',from:'0'},
					function callback(result){
						if(result=='empty'){
							alert('您目前无待验证手机');
						}else if(result!=''){
							$("#questionId").text(result);
							$("#crmcheckdialog").dialog('open');
						}
					},
					"json");
		});
	});
	
function checkMobile(is_submit){
	$("#mobileTip").hide();
	var text = $("#mMobile").attr('value');
	if(text.length==0){
		$("#mobileTip").html("请输入手机号码");
		$("#mobileTip").show();
	}else if(text.length!=11){
		$("#mobileTip").html("手机号码格式错误");
		$("#mobileTip").show();
	}else {
		$.post("<%=ServerValue.getFrontContextPath()%>/checkRegData.do",{c_id:4,mobile:text},
				function callback(result){
					if(result=='exist'){
						$("#mobileTip").html("此手机号码已注册");
						$("#mobileTip").show();
					}else {
						if(is_submit == 1){
							$("#sendMobile").val($("#mMobile").val());
							$("#resendForm").submit();
							return false;
						}
					}
				},
				"json");
	}
}
</script>
</head>
<body>
<div id="mdialog" title="更改手机号码" class="m-regform" style="display:none;">
<style type="text/css">.m-regform{ padding:25px 15px; } .m-regform li{ margin:0; list-style-type:none; } .w-head{ width:135px; font-size:14px; }</style>
  <p>更换号码后将会重新发送校验码。</p>
  <ul>
      <li class="w-1of1" style="padding-top:1em;"><div class="w-head">要更换的手机号码：</div><div style="margin-top:-1em;"><strong class="ipt-w20"><input type="text" id="mMobile" maxlength="11"/></strong><span style="display:block;"><span class="msg rn" id="mobileTip" style="display:none;">请输入手机号</span></span></div></li>
      <li class="w-1of1"><div class="w-head">&nbsp;</div><div class="w-note">(<fmt:formatDate pattern="yyyy-MM-dd" value="${member.activateExpireDate}" />前您尚可使用${limitMobileRegTimes-member.activateCount}次短信)</div></li>
  </ul>
  <div align="center"><a href="javascript:;" class="btn-mid" id="mcommit">确认</a></div>
</div>
<div id="edialog" title="更改验证方式" class="member-reg-alert-1" style="display:none;">
<s:form action="tomailactivate.do" method="post" id="toEmailActivateForm">
  <input type="hidden" value="${loginID}" name="loginID">
  <p>确定改用邮箱证來激活帐户？</p>
  <div align="center"><a href="javascript:;" class="btn-mid" id="ecommit">确定</a> <a href="javascript:;" class="btn-mid" id="ecancle">取消</a></div>
</s:form>
</div>
<div id="sdialog" title="成功发送手机短信" class="member-reg-alert-ok" style="display:none;">
  <p id="smsg">已经向您的手机<span class="txt-rd"><strong>${mobile}</strong></span><br />
  发送免费的验证短信。</p>
  <div align="center"> <span style="text-align:center;"><a href="javascript:;" class="btn-mid" id="sclose">关闭</a></span> </div>
</div>
<div id="fdialog" title="更改手机号码" class="member-reg-alert" style="display:none;">
  <p>抱歉，申请注册<span class="txt-rd"><strong>7</strong></span>天內（至<span class="txt-rd"><strong><fmt:formatDate pattern="yyyy-MM-dd" value="${member.activateExpireDate}" /></strong></span>）<br />
    您已超过使用短信服务的上限，请查看您的手机短信或改用邮箱注册。</p>
  <div align="center"> <span style="text-align:center;"><a href="javascript:;" id="fclose" class="btn-mid">关闭</a></span> </div>
</div>
<div id="crmcheckdialog" title="手机验证" class="phone-area dailog-ok" style="display:none;">
	<p>您已请求客服人工验证<br />联络手机号码：<span class="txt-rd">${mobile}</span><br />请保持接听畅通，我们会在24小时内联络上述号码。<br />您也可致电4001-168-100，请客服人工验证，案件编<br />号：<span class="txt-rd" id="questionId"></span>。<br />耀点100真心感谢您的支持！</p>
    <div align="center">
         <span style="text-align:center;"><a class="btn-mid" href="javascript:;" id="crmClose">关闭</a></span>
    </div>
</div>
  <div id="main" class="member-reg">
  	<h3>耀点100会员注册</h3>
  	<img src="/images/union/union_regstep_2.gif" alt="注册流程2_激活帐号" class="step-img" />
	<div class="member-alive">
  		<p>感谢您注册耀点100会员。</p>
        <p>我們已经向您的手机发送免费的校验码短信，请查看您的手机短信。</p>
      <s:form action="mobileRegActivate.do" method="post" id="toMobileActivateForm">
  		<input type="hidden" value="${loginID}" name="loginID">
      	<ul class="alive-phone">
          <li><div><label for="name"><strong>手机号码：</strong></label></div><div><p><span class="txt-rd">${mobile}</span><a href="javascript:;" id="modifyMobile">更换号码</a></p></div></li>
          <li><div><label for="name"><strong>校验码：</strong></label></div><div>&nbsp;<strong class="ipt-w20"><input type="text" name="ccode" id="ccode" maxlength="8"/></strong><br/><span class="msg rn" id="ccodeTip" style="display:none;">请输入校验码</span></div></li>
      	</ul>
      </s:form>
      <p align="center" class="c-f txt-s"><a href="javascript:;" id="goactivate" class="btn-mid">确定</a></p>
        <p>&nbsp;</p>
        <c:choose>
	      <c:when test="${member.activateCount < limitMobileRegTimes}">
	      	<p>如果您<c:if test="${actionResult == 'success' || empty actionResult}">在30秒内</c:if>没有收到校验码，<input type="button" id="resend" value="请于30秒后点此重发校验码" class="btn-reg-phone" disabled="disabled"/>
        	<span class="txt-s txt-gy">(<fmt:formatDate pattern="yyyy-MM-dd" value="${member.activateExpireDate}" />前您尚可重发${limitMobileRegTimes-member.activateCount}次短信)</span></p>	
	      </c:when>
	      <c:otherwise>
	      	<c:if test="${not empty member.tempMobile}">
	     	<p>收不到短信？您还可以&nbsp;<input class="btn-reg-phone" type="button" value="点击请求客服人工验证" id="goCrmCheck"/></p>
	     	</c:if> 
	      </c:otherwise>
      	</c:choose>
        <p class="txt-s txt-rd">请注意：您的注册信息将保留7天（至<fmt:formatDate pattern="yyyy-MM-dd" value="${member.activateExpireDate}" />截止），请于期限内完成验证，方能注册成功。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如逾期未完成，请重新注册。</p>
    </div>
     <c:if test="${not empty mgmName}">
     <div class="data-complete-txt">
     	<p>激活成功后，将可使用${mgmName }给你的${cpItem.coupon.faceValue }元礼券，${cpItem.coupon.description }！</p>
     </div>
     </c:if>
    <div class="tips-li">
        <strong>提示：</strong>
          <ul>
            <li>．如长时间无法找到您的验证短信，可重新发送校验码，也可<a href="javascript:;" id="modifyMobile">更改号码</a>，用其他的手机号码再收一封新的短信。</li>
            <li>．如您一直无法透过手机完成帐号激活，可改用<a href="javascript:;" id="echange">邮箱验证</a>来完成您的注册。 </li>
            <li>．在您完成激活前，您无法正常使用耀点100的所有功能。</li>
          </ul>
     </div>
  </div>
<s:form action="mobileresend.do" method="post" id="resendForm">
  <input type="hidden" value="${loginID}" name="loginID">
  <input type="hidden" id="sendMobile" name="mobile">
</s:form>
</body>
</html>